<template>
    <div class="home-weekend">
        <h2 class="weekend-title">
            周末去哪儿
        </h2>
        <ul>
            <li v-for="item of weekendList" :key="item.id" class="weekend-info">
                <img class="info-img" :src="item.imgUrl" />
                <div class="weekend-content">
                    <h3 class="info-title">{{ item.title }}</h3>
                    <p class="info-desc">{{ item.desc }}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
}
</script>

<style scoped>
.home-weekend{

      background: #f6f6f6;
}
  .weekend-title {
      font-size: 0.32rem;
      height: .8rem;
      line-height: .8rem;
      padding-left: .2rem;
  }
  .weekend-info {
      margin-bottom: .1rem;
  }
  .info-img {
      width: 100%;
  }
  .weekend-content {
      overflow: hidden;
      padding: .2rem;
      background: #fff;
  }
  .info-title {
      font-size: 0.28rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .info-desc {
      font-size: .24rem;
      color: #666;
      margin-top: .2rem;
      margin-bottom: .1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
</style>
